<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="extend-box">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="占地面积" v-bind="col">
          <a-input placeholder="请输入占地面积" addonAfter="平方米" v-decorator="['floor_area',{initialValue:'0.00'}]"/>
        </a-form-item>
        <a-form-item label="建筑面积" v-bind="col">
          <a-input placeholder="请输入建筑面积" addonAfter="平方米" v-decorator="['edifice_area',{initialValue:'0.00'}]"/>
        </a-form-item>
        <a-form-item label="公共场所面积" v-bind="col">
          <a-input placeholder="请输入公共场所面积" addonAfter="平方米" v-decorator="['public_area',{initialValue:'0.00'}]"/>
        </a-form-item>
        <a-form-item label="绿化面积" v-bind="col">
          <a-input placeholder="请输入绿化面积" addonAfter="平方米" v-decorator="['green_area',{initialValue:'0.00'}]"/>
        </a-form-item>
        <a-form-item label="车位面积" v-bind="col">
          <a-input placeholder="请输入车位面积" addonAfter="平方米" v-decorator="['car_area',{initialValue:'0.00'}]"/>
        </a-form-item>
        <a-form-item label="车库面积" v-bind="col">
          <a-input placeholder="请输入车库面积" addonAfter="平方米" v-decorator="['garage_area',{initialValue:'0.00'}]"/>
        </a-form-item>
        <a-form-item label="车位数" v-bind="col">
          <a-input placeholder="请输入车位数" addonAfter="个" v-decorator="['car_numbers',{initialValue:0}]"/>
        </a-form-item>
        <a-form-item label="楼宇数量" v-bind="col">
          <a-input placeholder="请输入楼宇数量" addonAfter="个" v-decorator="['building_numbers',{initialValue:0}]"/>
        </a-form-item>
        <a-form-item label="备注" v-bind="col">
          <a-input placeholder="请输入备注" type="textarea" rows="4" v-decorator="['remarks']"/>
        </a-form-item>
        <a-form-item :wrapperCol="{xs:{span:24,offset:0},sm:{span:24,offset:8}}">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button style="margin-left: 16px;" @click="() => { $router.go(-1) }">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-spin>
</template>

<script>
  export default {
    name: 'data_community_extend',
    data() {
      return {
        form:this.$form.createForm(this),
        token:this.$store.state.user.token, // 用户token
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:8}}
        },
        spinning:false,
        id:'', // 小区id
      }
    },
    async mounted() {
      let { id } = this.$route.params;
      this.id = id;
      if(!isNaN(this.id) && !this.$common.isEmpty(id)){
        let data = await this.getInfo(id);
        let { floor_area,edifice_area,public_area,green_area,car_area,garage_area,car_numbers,building_numbers,remarks } = data;
        this.form.setFieldsValue({floor_area,edifice_area,public_area,green_area,car_area,garage_area,car_numbers,building_numbers,remarks});
      }else this.$router.go(-1);
    },
    methods:{
      // 获取小区设置信息
      getInfo(id) {
        return new Promise((resolve,reject) => {
          this.axios({
            method:'post',
            url:'/community/getBdInfo',
            data:{id,token:this.token}
          }).then(res => {
            let { code,msg,data } = res;
            if(code === 0){
              resolve(data);
            }else this.$message.warning(msg);
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          })
        })
      },
      // 提交信息
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          Object.assign(values,{token:this.token,id:this.id});
          this.spinning = true;
          this.axios({
            method:'post',
            url:'/community/operation',
            data:values,
          }).then(res => {
            this.spinning = false;
            if(res.code == 0){
              this.$message.success('保存成功',1);
              this.$router.push({name:'data_community_index'});
            }else this.$message.warning(res.msg);
          }).catch(() => {this.$message.error('服务器发生错误...',2);this.spinning = false;});
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .extend-box{
    background: #ffffff;
    padding:25px;
    box-sizing: border-box;
  }
</style>